<template>
  <div style="display: inline-block;width: 175px;position: relative;height: 44px;">
     <div class="seleDownCurr" @click="showHide">
       {{current.mark}}
       <img src="../../assets/img/arrDown.png" alt="" style="position: absolute;top:18px;right: 14px;width: 14px;">
     </div>
    <transition name="sele">
      <div class="seleDownItem" v-if="show">
        <div v-for="item in list" @click="sele(item)" style="height: 44px;line-height: 44px;border-bottom: 1px solid #3A3A47">
          {{item.mark}}
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default{
  props:{
    list:{
      type: Array,
      default: function () {
        return [];
      }
    },
    from:{
      type:String,
      default:'chongCoin'
    },
    show_down:{
      default:false
    },
    current:{}
  },
  watch:{
    from(newValue,oldValue) {
      this.show = false;
    }
  },
  data(){
    return {
      show:false
    }
  },
  methods:{
    sele(data){
      this.show = !this.show;
      this.$emit(this.from,data)
    },
    showHide(){
      this.show = !this.show
    }
  }
}
</script>
<style>
  .seleDownCurr{
    text-align: center;
    line-height: 44px;
    height: 44px;
    border-radius: 4px;
    background: #424252;
    position: absolute;
    width: 100%;
    z-index:4;
    border:1px solid #494956;
    /*box-shadow: 0px 0px 4px 0px #424252 inset;*/
    box-sizing: border-box;
  }
  .seleDownItem{
    position: absolute;
    top:46px;
    left: 0;
    width: 100%;
    background: #424252;
    z-index: 5;
    text-align: center;
    max-height: 200px;
    overflow-y: scroll;
    /*height: 200px;*/
    /*overflow: scroll;*/
  }
  .sele-enter-active, .sele-leave-active {
    transition: opacity .5s;
  }
  .sele-enter, .sele-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>
